<template>
  <div class="configlist">
    <el-table :data="list" stripe>
      <el-table-column label="ID" prop="id" width="200px" />
      <el-table-column
        label="当前版本"
        prop="versionName"
        width="200px"
      />
      <el-table-column label="平台" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 0">安卓</div>
          <div v-if="scope.row.type == 1">ios</div>
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        prop="content"
        width="200px"
      />
      <el-table-column label="强制更新" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.isForce == 1">是</div>
          <div v-if="scope.row.isForce == 0">否</div>
        </template>
      </el-table-column>
      <el-table-column label="下载链接" prop="url" />
      <el-table-column label="创建时间" prop="createAt">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.createAt
                ? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : null
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="APP编辑"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="content">
        <el-row>
          <div style="margin-bottom: 20px">请上传文件</div>
          <el-form
            ref="form"
            label-position="left"
            label-width="100px"
            :model="form"
            :rules="rules"
          >
            <el-form-item>
              <el-col>
                <el-upload
                  class="img-upload-wrapper"
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="changeFile"
                >
                  <img
                    v-if="form.bannerUrl"
                    alt
                    :src="form.bannerUrl"
                    class="avatar"
                  >
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-col>
            </el-form-item>
            <!-- <el-form-item class="input" label="版本号">
              <el-col :span="24">
                <el-input v-model="form.versionNumber" type="number" />
              </el-col>
            </el-form-item> -->
            <el-form-item class="input" label="是否强制更新">
              <el-col :span="24">
                <el-select v-model="form.isForce" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item class="input" label="下载链接">
              <el-col :span="24">
                <el-input v-model="form.download" readonly />
              </el-col>
            </el-form-item>
            <el-form-item class="input" label="版本名称">
              <el-col :span="24">
                <el-input v-model="form.versionName"  />
              </el-col>
            </el-form-item>
            <el-form-item label="更新内容">
              <el-input
                v-model="form.content"
                type="textarea"
                :rows="5"
                maxlength="150"
              />
            </el-form-item>
          </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 100%" @click="edit">提交</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getVersionList, editVersion } from '@/api/appconfig'
import { uploadApk } from '@/api/common/index'
export default {
  data() {
    return {
      list: [],
      // params: {
      //   version: null,
      //   downlink: null,
      //   content: null,
      // },
      centerDialogVisible: false,
      permission: {
        add: ["admin"],
        edit: ["admin", 'software:edit'],
        del: ["admin"],
      },
      scope: {},
      form: {},
      rules: {
        bannerUrl: [
          { required: true, message: '请选择软件包', trigger: 'change' }
        ]
      },
      options: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getVersionList({}).then((res) => {
        // console.log(res.data);
        // this.list = this.list.concat(res.data);
        this.list = res.data
        // console.log(this.list);
      })
    },
    changeFile(fileRaw) {
      console.log(fileRaw)
      const file = fileRaw.raw
      const isApk = file.type == 'application/vnd.android.package-archive'
      // const isIpa = file.type == "application/vnd.android.package-archive";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isApk) {
        console.log(111)
        this.$message.error('上传文件只能是apk或者ipa文件!')
        return
      }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      //   return;
      // }
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('type', this.form.type)
      console.log(formData)
      // this.form.imgFile = file;
      uploadApk(formData).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.$message.success('上传成功')
          this.$set(this.form, 'download', res.data)
          this.$set(this.form, 'url', res.data)

       
        } else {
          this.$message.error(res.message)
        }
      })
    },
    openDialog(scope) {
      // scope.versioncode=scope.versioncode+1
      this.form = scope
      
      console.log(scope)
      this.centerDialogVisible = true
    },
    edit() {
      console.log(this.form)
      this.form.versionCode+=1
      editVersion(this.form).then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.$message.success('编辑成功')
          this.centerDialogVisible = false
          this.getList()
        }else{
          this.getList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.configlist {
  padding: 20px;
}
.content {
  width: 65%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
/deep/ .img-upload-wrapper .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .img-upload-wrapper .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
